<template>
	<view class="app">
		<u-navbar :back-text-style="{color: '#fff'}" title-color="#fff" back-icon-color="#ffffff"
			back-icon-name="arrow-leftward" title="身份实名认证" :background="NavBackgroud"></u-navbar>
		<view class="padding">
			<u-line color="info"></u-line>
			<view class="padding">
				<text class="cuIcon-title text-blue"></text><text>基础信息</text>
			</view>
			<view class="flex padding">
				<text class="flex-sub">真实姓名</text>
				<input class="flex-treble" type="text" maxlength="10" v-model="identityInfo.identityName"
					placeholder="请输入真实姓名" placeholder-class="placeholder" />
			</view>
			<view class="flex padding">
				<text class="flex-sub">身份证号</text>
				<input class="flex-treble" type="text" maxlength="30" v-model="identityInfo.identityNo"
					placeholder="请输入身份证号" placeholder-class="placeholder" />
			</view>
			<u-line color="info"></u-line>
			<view class="padding">
				<text class="cuIcon-title text-blue"></text><text>身份证正面照</text>
			</view>
			<view class="flex justify-center">
				<view>
					<view class="camera-icon mb30" @click="uploadPic('identityPict1')">
						<image v-if="!identityInfo.identityPict1"
							style="display:inline-block;width: 420rpx;height: 270rpx;" mode="aspectFit"
							:src="'/static/images/front.png'"></image>
						<image v-else style="display:inline-block;width: 420rpx;height: 270rpx;" mode="aspectFit"
							:src="identityInfo.identityPict1"></image>
					</view>
				</view>
			</view>
			<u-line color="info"></u-line>
			<view class="padding">
				<text class="cuIcon-title text-blue"></text><text>身份证正面照</text>
			</view>
			<view class="flex justify-center">
				<view>
					<view class="camera-icon mb30" @click="uploadPic('identityPict2')">
						<image v-if="!identityInfo.identityPict2"
							style="display:inline-block;width: 420rpx;height: 270rpx;" mode="aspectFit"
							:src="'/static/images/back.png'"></image>
						<image v-else style="display:inline-block;width: 420rpx;height: 270rpx;" mode="aspectFit"
							:src="identityInfo.identityPict2"></image>
					</view>
				</view>
			</view>
			<u-line color="info"></u-line>
			<view class="padding">
				<text class="cuIcon-title text-blue"></text><text>手持身份证正面半身照</text>
			</view>
			<view class="flex justify-center">
				<view>
					<view class="camera-icon mb30" @click="uploadPic('identityPict3')">
						<image v-if="!identityInfo.identityPict3"
							style="display:inline-block;width: 420rpx;height: 270rpx;" mode="aspectFit"
							:src="'/static/images/handle.png'"></image>
						<image v-else style="display:inline-block;width: 420rpx;height: 270rpx;" mode="aspectFit"
							:src="identityInfo.identityPict3"></image>
					</view>
				</view>
			</view>
			<u-line color="info"></u-line>
			<view class="f24 c-gray margin-top">
				<view class="mb20">·请确保证身份证与本子信息一致，且真实有效</view>
				<view class="mb50">·请在保持拍摄照片、文字清晰</view>
			</view>

			<u-button class="margin-top-xs cu-btn lg" style="background: #55BB8A !important; color: white;"
				@click="commit">提交审核 </u-button>
		</view>
	</view>
</template>

<script>
	import {
		getMenuList,
		getUserInfo,
		getConfig,
		editIdentity
		// setVisit
	} from '@/api/user.js';
	let _self;
	export default {
		data() {
			return {
				userInfo: null,
				identityInfo: {
					identityPict1: '',
					identityPict2: '',
					identityPict3: '',
					identityComment: '',
					identityName: '',
					identityNo: '',
					identityResult: '' //0:	"未认证";  1:"待审核";  2: "认证通过";  3: "认证不过";
				}
			}
		},
		mounted() {
			_self = this;
			_self.getUserInfo()
		},
		methods: {
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data;
					that.identityInfo.identityPict1 = that.userInfo.identityPict1
					that.identityInfo.identityPict2 = that.userInfo.identityPict2
					that.identityInfo.identityPict3 = that.userInfo.identityPict3
					that.identityInfo.identityComment = that.userInfo.identityComment
					that.identityInfo.identityName = that.userInfo.identityName
					that.identityInfo.identityNo = that.userInfo.identityNo
					that.identityInfo.identityResult = that.userInfo.identityResult		
					if(that.userInfo.identityResult==3){
						uni.showModal({
							title:'认证不过',
							content:that.userInfo.identityComment
						})
					}			
				
				});
			},
			uploadPic(name) {
				let that = this;
				that.$util.uploadImageOne({
					url: 'user/upload/image',
					name: 'multipart',
					model: "user",
					pid: 7
				}, function(res) {
					that.$set(that.identityInfo, name, res.data.url);
				});
			},

			commit() {
				console.log(this.userInfo)
				if (!this.identityInfo.identityName || this.identityInfo.identityName.length == 0) {
					uni.showToast({
						title: '还未填写真实姓名'
					});
					return;
				}

				if (!this.identityInfo.identityNo || this.identityInfo.identityNo.length == 0) {
					uni.showToast({
						title: '还未填写身份证号'
					});
					return;
				}

				if (!this.identityInfo.identityPict1 || this.identityInfo.identityPict1.length == 0) {
					uni.showToast({
						title: '还未上传头像面'
					});
					return;
				}

				if (!this.identityInfo.identityPict2 || this.identityInfo.identityPict2.length == 0) {
					uni.showToast({
						title: '还未上传国徽面'
					});
					return;
				}

				if (!this.identityInfo.identityPict3 || this.identityInfo.identityPict3.length == 0) {
					uni.showToast({
						title: '还未上传手持身份证半身照'
					});
					return;
				}
				editIdentity(this.identityInfo).then(res => {
					uni.showModal({
						title: '提交成功',
						success() {
							uni.navigateBack({
								delta:-1
							})
						}
					})
				})

			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.app {
		padding-top: 20rpx;
	}

	.main-wrap {
		margin: 0 30rpx;

		.wrap-header {
			height: 88rpx;
			line-height: 88rpx;

			.lh88 {
				height: 88rpx;
				line-height: 88rpx;
				color: #171300;
			}
		}

		.wrap-content {
			border-top: 1rpx solid #E2E2E2;
			padding: 60rpx 90rpx;

			.camera-icon {
				width: 420rpx;
				height: 270rpx;
				background: #EEEEEE;
				border-radius: 10rpx;
				text-align: center;
				line-height: 270rpx;
			}
		}

		.bgc-gray {
			width: 690rpx;
			height: 100rpx;
			margin: 0 auto;
			color: #8F8F8F;
			background: #EEEEEE !important;
			border-radius: 10rpx;
			line-height: 100rpx;
			vertical-align: middle;
			text-align: center;
		}
	}

	.cell {
		height: 80rpx;

		.tit {
			min-width: 130rpx;
			font-size: 30rpx;
			color: #333;
		}

		.input {
			flex: 1;
			font-size: 30rpx;
			color: #333;
		}

		.icon-you {
			flex-shrink: 0;
			margin-right: 8rpx;
			margin-left: 40rpx;
			font-size: 24rpx;
			color: #aaa;
		}

		switch {
			transform: scale(0.8) translateX(10rpx);
			transform-origin: center right;
		}
	}

	.icon-40 {
		display: inline-block;
		width: 40rpx;
		height: 40rpx;
	}

	.mb30 {
		margin-bottom: 30rpx;
	}

	.row {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}

	.c-gray {
		color: #8F8F8F;
	}

	.f24 {
		font-size: 24rpx;
	}

	.placeholder {
		color: #999 !important;
	}
</style>
